---
title: Tailwind CSS Video for React - Material Tailwind
description: Customise your web projects with our easy-to-use video examples for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "video",
    "autoplay-video",
    "muted-video",
    "more-examples",
  ]
github: video
prev: img
next: sidebar
---

<DocsTitle href="video">
# Tailwind CSS Video - React
</DocsTitle>

Use our Tailwind CSS <Code>video</Code> example to video in your web projects. The <Code>video</Code> can be used to display media content specially videos on your website.

See below our beautiful <Code>video</Code> examples that you can use in your Tailwind CSS and React project. The examples also comes in different styles so you can adapt it easily to your needs.

<br />

<CodePreview component={<VideoExamples.DefaultVideo />}>
```jsx
export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
```
</CodePreview>

---

<DocsTitle href="autoplay-video">
## Autoplay Video
</DocsTitle>

<CodePreview component={<VideoExamples.AutoplayVideo />}>
```jsx
export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
```
</CodePreview>

---

<DocsTitle href="muted-video">
## Muted Video
</DocsTitle>

<CodePreview component={<VideoExamples.MutedVideo />}>
```jsx
export default function Example() {
  return (
    <video className="h-full w-full rounded-lg" controls autoPlay muted>
      <source src="https://docs.material-tailwind.com/demo.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}
```
</CodePreview>

---

<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>

Check out more video component examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.
